<template>
    <view class="cu-modal bottom-modal" :class="{ show: visible }">
        <view class="mask" @click="close"></view>
        <view class="wrapper cu-dialog">
            <view class="paddingY25 flex-align-center relative">
                <image :src="resource.pay_title_dart" class="title" />
                <image :src="resource.icon_x" class="x" @click="close" />
            </view>
            <view>
                <view class="flex-align paddingB25">
                    <image :src="data.cover" class="logo flex-shrink0 flex-shrink0" />
                    <view class="marginL12 flex1 self-stretch flex-column-between">
                        <view class="color-1 font4 bold">{{ data.name }}</view>
                        <view class="color-theme">
                            <text class="font2">¥</text>
                            <text class="font8 bold">{{ data.price }}</text>
                        </view>
                    </view>
                </view>
                <view
                    v-if="cash && hide"
                    class="flex-align paddingY15"
                    style="border-top: 2rpx solid #eeeeee"
                >
                    <view class="flex1 font4 color-1">
                        使用钱包支付
                        <text class="color-theme">(余额：¥{{ cash.balance }})</text>
                    </view>
                    <switch
                        class="purple"
                        :checked="cashChecked"
                        @change="changeCashChecked"
                    ></switch>
                </view>
            </view>
            <cm-button ::height="44" @click="pay">¥{{ lastPrice }} 立即支付</cm-button>
            <view class="fill"></view>
        </view>
    </view>
</template>

<script>
    import cmButton from '../../components/cm-button.vue'
    import { throttle } from '@/utils'
    import { H5 } from '@/utils/config'
    import resource from '@/utils/resource'
    import { baseEncode } from '../../utils/utils'
    export default {
        components: { cmButton },
        props: {
            data: Object
        },
        data() {
            return {
                resource,
                visible: false,
                checked: true,
                cash: null,
                cashChecked: false,
                lastPrice: null //最终金额
            }
        },
        computed: {
            hide() {
                return !this.$store.state.hide
            },
            payInfo() {
                return this.$store.state.payInfo
            }
        },
        watch: {
            payInfo(val) {
                if (val && val.payResult == 'SUCCESS') {
                    this.paySuccess(val)
                } else if (val && val.payResult !== 'SUCCESS') {
                }
            }
        },
        methods: {
            show(data = {}) {
                this.lastPrice = data.paymentAmount
                if (data.cash && data.cash.balance > data.paymentAmount) {
                    this.cash = data.cash
                    this.cashChecked = true
                } else {
                    this.cash = null
                    this.cashChecked = false
                }
                this.visible = true
            },
            close() {
                this.visible = false
            },
            changeCashChecked(e) {
                this.cashChecked = e.detail.value
            },
            async pay() {
                throttle.call(this.realPay)
            },
            async realPay() {
                let paymentType = this.cashChecked ? 'WALLET' : 'WXPAY_JSAPI'
                const res = await this.$service.sell.apply(this.data.id, paymentType, 1)
                //判断是否是微信支付
                if (res) {
                    if (res.paySuccess) {
                        this.close()
                        this.$event.emit(this.$event.key.SELL_REFRESH)
                        this.$router.replace('sell_record', { active: 3 })
                        return
                    }
                    if(res.redirectUrl){
                      this.thirdPay(res)
                    }else{
                      this.wechatPay(res)
                    }
                    return
                }
            },
            wechatPay(data) {
                let payInfo = data.payInfo
                wx.requestPayment({
                    timeStamp: payInfo.timeStamp,
                    nonceStr: payInfo.nonceStr,
                    package: payInfo.packageValue,
                    signType: payInfo.signType,
                    paySign: payInfo.paySign,
                    success: (res) => {
                        this.close()
                        this.$event.emit(this.$event.key.SELL_REFRESH)
                        this.$router.replace('sell_record', { active: 3 })
                    },
                    fail: (res) => {}
                })
            },
            thirdPay(data) {
                let self = this
                let redirectUrl = data.redirectUrl
                let requestId = data.requestId
                const base64Url = encodeURIComponent(baseEncode(redirectUrl))
                wx.openEmbeddedMiniProgram({
                    path: 'pages/pay/order', // 启动目标页面
                    appId: 'wx0448557563ffc600', // 启动的小程序
                    envVersion: 'release', // develop | trial | release
                    verify: 'binding',
                    extraData: {
                        title: '订单付款', // 导航Title
                        tip: `待支付订单付款`, // 支付提示内容
                        requestId: requestId, // 本次请求ID
                        action: 'epPay', // 支付模式
                        payUrl: base64Url // 支付地址, 需要进行Base64转换
                    },
                    success: (res) => {
                        console.info('启动成功', res)
                    },
                    fail: (err) => {
                        console.info('启动失败', err)
                    }
                })
            },
            paySuccess(payInfo) {
                this.close()
                this.$store.state.payInfo = null
                this.$event.emit(this.$event.key.SELL_REFRESH)
                this.$router.replace('sell_record', { active: 3 })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
    .wrapper {
        padding: 0 28rpx;
        background: #fff;
        overflow: hidden;
        border-top-left-radius: 30rpx !important;
        border-top-right-radius: 30rpx !important;

        .title {
            width: 172rpx;
            height: 28rpx;
        }
        .x {
            position: absolute;
            right: 28rpx;
            top: 50%;
            margin-top: -16rpx;
            width: 32rpx;
            height: 32rpx;
        }
        .logo {
            width: 180rpx;
            height: 180rpx;
            border-radius: 8rpx;
        }
        .fill {
            height: 40rpx;
        }
    }
</style>
